<template>
  <div class="list-bar-module-box">
    <div class="box">
      <rest-count-to :endVal="isNaN(Number(numb)) ? 0 : Number(numb)" :color="color" :precision="2" :forcedDecimals="false"></rest-count-to>
      <span class="suffix">{{ unit }}</span>
    </div>
    <div class="name-box">
      <span class="small">{{ name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    /** #名称 */
    name: { type: String, required: true },
    /** #数字 */
    numb: { type: [String, Number], required: true },
    /** #单位 */
    unit: { type: String, default: '元' },
    /** #文字颜色 */
    color: { type: String, required: true },
  });
</script>

<style lang="scss" scoped>
  .list-bar-module-box {
    @include flex(column, nowrap, center, center, center);
    width: 100%;
    height: 44px;
    padding: 0 10px;

    .suffix {
      margin-left: 2px;
      font-size: var(--my-change-base12-2x-size);
      color: var(--el-text-color-primary);
    }

    .name-box {
      margin-top: 4px;
      font-size: 12px;
      color: var(--el-text-color-regular);
    }
  }
</style>
